
// 是否完成登录显示用户名
let nickname = getCookie("nickname") ? JSON.parse(getCookie("nickname")) : null;

// 左侧信息
// 获取商品id
// let ids=getUrlParam("id")
// getUrlParam函数在地址栏截取?id  获取到所点击的商品ID
const goodsId = getUrlParam("id");
// console.log(goodsId);
ajax({
    url: "http://phpclub.org.cn:8080/api/goods/detail",
    data: {
        goodsId: goodsId
    },
    success: function (response) {
        // console.log(response);
        let { data: { goodsImg } } = response
        let html = ''
        goodsImg.forEach((ele, index) => {
            if (index == 0)
                html += ` <img class="active" src="${ele.goodsImg}">`
            else
                html += ` <img src="${ele.goodsImg}">`
        });
        document.querySelector(".box").innerHTML = `<div class="middleBox">
            <img src="${response.data.goodsThumb}" width="400" height="400">
            <div class="shadow"></div>
            </div>
            <div class="smallBox">
            ${html}
            </div>
            <div class="bigBox"></div>`
        fdj()



        // console.log(response.data.id);
        // 将本商品详情网页的商品ID和商品名称属性值放在地址栏，下一个网页截取使用
        if (!nickname) {
            // document.querySelector(".buy").innerHTML=`
            // <a href=""><button class="buyButton">立即购买</button></a>
            // <a class="addCart" href="login.html"><button class="add" >前往登录</button></a>
            // `
            document.querySelector(".addCart").onclick = function () {
                layer.open({
                    type: 1
                    , title: "操作提示"//不显示标题栏
                    , closeBtn: false
                    , area: '300px;'
                    , shade: 0.8
                    , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    , btn: ['登录', '取消']
                    , btnAlign: 'c'
                    , moveType: 1 //拖拽模式，0或者1
                    , content: '<div style="padding: 50px; line-height: 22px; background-color:gray; color: #fff; font-weight: 300;">登录后才能添加商品到购物车</div>'
                    , success: function (layero) {
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                            href: 'login.html'
                            , target: '_blank'
                        });
                    }
                });


            }
        }

        // 右侧信息
        document.querySelector(".goodsName").innerHTML = response.data.goodsName;
        document.querySelector(".goodsBody").innerHTML = response.data.goodsBody;
        document.querySelector(".marketPrice").innerHTML = response.data.marketPrice;
        document.querySelector(".shopPrice").innerHTML = response.data.shopPrice;

        document.querySelector(".addCart").href =
            `addCart.html?id=${response.data.id}&goodsName=${response.data.goodsName}&userId=${nickname.id}`
    }
})

// 将放大镜函数封起来，上面调用
function fdj() {
    const boxDom = document.querySelector('.box');
    const middleBoxDom = document.querySelector('.middleBox');
    const smallBoxImgsDom = document.querySelectorAll('.smallBox>img');
    const bigBoxDom = document.querySelector('.bigBox');
    const shadowDom = document.querySelector('.shadow');
    bigBoxDom.style.backgroundImage = `url(${middleBoxDom.firstElementChild.src})`
    // console.log(middleBoxDom);
    // 2.实现点击小图切换中图，同时修改大图
    smallBoxImgsDom.forEach(item => {
        // 每一个小图片绑定点击事件
        item.onclick = function () {
            // 实现被点击的存在红色边框效果
            smallBoxImgsDom.forEach(dom => dom.className = "")
            this.className = "active";
            //   实现修改中图
            middleBoxDom.querySelector('img').src = this.src;
            // 修改大图的背景图片
            bigBoxDom.style.backgroundImage = `url(${this.src})`;
        }
    })
    // 鼠标滑入事件
    middleBoxDom.onmouseover = function () {
        // 显示遮罩
        shadowDom.style.display = "block";
        // 鼠标滑入后移动开始生效
        middleBoxDom.onmousemove = function (event) {
            // console.log(event);
            // offsetX/Y 获取坐标点相对于元素的位置,在移动过程中 事件源可能是img标签也可能是遮罩 导致所取出来的xy值错误的，最终导致抖动
            let x = event.clientX;
            let y = event.clientY;
            // 获取遮罩的宽高的一半,让遮罩层在鼠标中间
            let shadowWidthHalf = shadowDom.clientWidth / 2;
            let shadowHeightHalf = shadowDom.clientHeight / 2;
            // 限制x,y的坐标点
            // 如果获取到x的坐标点比 box左侧距离+遮罩一般 还要小 就固定在左侧
            if (x < boxDom.offsetLeft + shadowWidthHalf) {
                x = boxDom.offsetLeft + shadowWidthHalf
            }
            // 如果x坐标 值大于 BOX距离左侧的距离+box的宽度-遮罩的一半
            if (x > boxDom.offsetLeft - shadowWidthHalf + boxDom.clientWidth) {
                x = boxDom.offsetLeft - shadowWidthHalf + boxDom.clientWidth;
            }
            // y轴和x同理。
            if (y < boxDom.offsetTop + shadowHeightHalf) {
                y = boxDom.offsetTop + shadowHeightHalf;
            }
            if (y > boxDom.offsetTop - shadowHeightHalf + middleBoxDom.clientHeight) {
                y = boxDom.offsetTop - shadowHeightHalf + middleBoxDom.clientHeight;
            }
            // 由于遮罩定位是按照middleBox进行计算的 xy 坐标点是以浏览器左上角计算。所以需要减掉整个box盒子水平与垂直的距离 offsetLeft offsetTop获取到相对于上级元素的定位偏移量
            shadowDom.style.left = x - boxDom.offsetLeft - shadowWidthHalf + "px";
            shadowDom.style.top = y - boxDom.offsetTop - shadowHeightHalf + "px";
            // 中图的移动距离/大图的移动距离=中兔的最大移动距离/大图的最大移动距离
            //    计算遮罩与中图的百分比
            // 百分比 = 遮罩层的定位偏移量/中图的尺寸

            let percentX = shadowDom.offsetLeft / middleBoxDom.clientWidth;
            let percentY = shadowDom.offsetTop / middleBoxDom.clientHeight;
            // console.log(percentX);
            // 计算大图的完整尺寸
            let bigBoxImgSize = getStyle(bigBoxDom, "backgroundSize");
            // 提取出背景图片的宽高
            let bigBoxImgWidth = parseInt(bigBoxImgSize.split(" ")[0]);
            let bigBoxImgHeight = parseInt(bigBoxImgSize.split(" ")[1]);
            // console.log(bigBoxImgWidth, bigBoxImgHeight);
            let xMove = bigBoxImgWidth * percentX;//大图水平移动距离
            let yMove = bigBoxImgHeight * percentY;//大图垂直移动距离
            // 设置大图背景图片position，负数是因为大图的移动和遮罩层的移动是相反的
            bigBoxDom.style.backgroundPosition = -xMove + "px -" + yMove + "px"
            // 显示大图
            bigBoxDom.style.display = "block";
        }
    }
    // 4、鼠标划出
    middleBoxDom.onmouseout = function () {
        // 隐藏遮罩
        shadowDom.style.display = 'none';
        // 隐藏大图
        bigBoxDom.style.display = 'none';
        // 设置移动事件解绑
        middleBoxDom.onmousemove = null;
    }
    /**
     * 获取标签指定的的样式
     * @param {Document} elem 需要获取样式的元素的dom对象
     * @param {String} attr 获取样式的名称
     * @returns String
     */
    function getStyle(elem, attr) {
        if (window.getComputedStyle) {
            // 表示window下存在getComputedStyle属性 说明绝对是IE高版本
            return window.getComputedStyle(elem)[attr];
        }
        // 代码走到这里绝对可以证明是IE低版本
        return elem.currentStyle[attr];
    }


}


// 下级城市接口

// 省
ajax({
    url: "http://phpclub.org.cn:8080/api/system/province",
    data: {
        parentId: 1
    },
    success: function (response) {

        console.log(response.data);
        let html = ""
        let provinceList = document.querySelector("#province");
        response.data.forEach(function (item, index) {
            html += `<option id="provinceId" value=${item.id}>${item.name}</option>`
        });
        provinceList.innerHTML += html
        // 市

        document.querySelector("#province").onchange = function (e) {
            let provinceValue = e.target.value
            console.log(provinceValue);
            ajax({
                url: "http://phpclub.org.cn:8080/api/system/province",
                data: {
                    parentId: provinceValue
                },
                success: function (response) {
                    console.log(response.data);
                    let html = ""
                    let cityList = document.querySelector("#city");
                    response.data.forEach(function (item, index) {
                        html += `<option value=${item.id}>${item.name}</option>`
                    });
                    cityList.innerHTML = html
                    // 区县
                    document.querySelector("#city").onchange = function (e) {
                        let cityValue = e.target.value
                        console.log(cityValue);
                        ajax({
                            url: "http://phpclub.org.cn:8080/api/system/province",
                            data: {
                                parentId: cityValue
                            },
                            success: function (response) {
                                console.log(response.data);
                                let html = ""
                                let areaList = document.querySelector("#area");
                                response.data.forEach(function (item, index) {
                                    html += `<option value=${item.id}>${item.name}</option>`
                                });
                                areaList.innerHTML = html
                            }
                        })

                    }
                }
            })

        }

    }

})
